<!-- 生成海报组件 -->
<template>
  <div class="create-poster">
    <div class="poster">
      <div class="close" @click="closeCreatePoster">
        <i class="iconfont icon-round_delete"></i>
      </div>
      <div class="poster-img">
        <img :src="posterImg" alt>
      </div>
      <div class="poster-canvas">
        <canvas ref="postercanvas" style="display:none"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  props: {
    posterDatas: Object
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      posterImg: ""
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    closeCreatePoster() {
      //子组件向父组件传值
      this.$emit("closePoster", false);
    },
    createPoster() {
      var canvas = this.$refs.postercanvas;
      //console.log(canvas); // <canvas ref="postercanvas"></canvas>
      var ctx = canvas.getContext("2d"); //创建一个canvas画布
      console.log(ctx);
      console.log(window.devicePixelRatio); //设备像素比  iphone6  @2   iphone6p  @3
      var devicePixelRatio = window.devicePixelRatio || 1;
      canvas.width = window.screen.availWidth * devicePixelRatio; //availWidth 可用宽度（不包括任务栏）
      canvas.height = window.screen.availHeight * devicePixelRatio; //availHeight 可用高度（不包括任务栏）

      canvas.style.width = window.screen.availWidth * devicePixelRatio + "px"; //availWidth 可用宽度（不包括任务栏）
      canvas.style.height = window.screen.availHeight * devicePixelRatio + "px"; //availHeight 可用高度（不包括任务栏）

      //   getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

      var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      //给canvas绘制一个白色背景
      for (var i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i] = 255;
        imgData.data[i + 1] = 255;
        imgData.data[i + 2] = 255;
        imgData.data[i + 3] = 255;
      }

      // putImageData  把图像数据（从指定的 ImageData 对象）放回画布上
      ctx.putImageData(imgData, 0, 0);

      //绘制图片
      console.log(this.posterDatas.goods_thumb);
      var img = new Image(); // <img/>
      img.src = this.posterDatas.goods_thumb;
      img.onload = function() {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height / 2);
      };

      //绘制价格
      ctx.font = "60px Arial";
      ctx.fillStyle = "#ff5555";
      ctx.fillText(
        "￥" + this.posterDatas.shop_price,
        10,
        canvas.height / 2 + 100
      );

      //绘制标题
      ctx.font = "30px Arial";
      ctx.fillStyle = "#ff5555";
      ctx.fillText(
        this.posterDatas.goods_name.slice(0, 25),
        30,
        canvas.height / 2 + 200
      );
      ctx.font = "30px Arial";
      ctx.fillStyle = "#ff5555";
      ctx.fillText(
        this.posterDatas.goods_name.slice(25),
        30,
        canvas.height / 2 + 240
      );

      setTimeout(() => {
        this.posterImg = canvas.toDataURL();
      }, 1000);
    }
  },
  mounted() {
    setTimeout(() => {
      this.createPoster();
    }, 1000);
  }
};
</script>
<style lang="less">
.create-poster {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  .poster {
    width: 80%;
    margin-left: 10%;
    height: 80%;
    margin-top: 15%;
    background: #fff;
    position: relative;
    .close {
      width: 4.4rem;
      height: 4.4rem;
      position: absolute;
      right: 1rem;
      text-align: center;
      top: -4.3rem;
      i {
        font-size: 2.4rem;
        color: #fff;
      }
      &::after {
        content: "";
        height: 2rem;
        width: 1px;
        display: block;
        background: #fff;
        margin: 0 auto;
      }
    }
    img {
      width: 100%;
    }
    .poster-canvas {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 9999;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      //   background: red;
    }
  }
}
</style>